<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet"
	href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="resources/js/jquery-1.11.0.min.js"></script>
<script src="resources/js/jquery-ui.min.js"
	type="text/javascript"></script>
<script src="resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen"
	href="resources/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="resources/css/plugins/ui.multiselect.css" />
<link href="resources/css/style.css" rel="stylesheet">

<script type="text/javascript">
	var dynamicColumns = "'W1','W2','W3','W4','W5'";
	var selected_month = '';
	var selected_year = '';
	var newUrl;
	var rid;
	var flag1;
	var flag2;
	var flag3;
	var flag4;
	$(document)
			.ready(
					function() {
						$("#tabs").tabs();

						var d = new Date();
						var month = d.getMonth();
						// alert("current date:"+d.) 
					/* 	$('#monthdropdown option[value=' + month + ']').attr(
								'selected', true); */
						 /* alert($('#monthdropdown option[value=' + month  + ']')); */
						
						$("#monthdropdown").change(function(e) {
							
	                      selected_month = $(this).val();
	                     alert("selected month:"+selected_month);
                         });
						 
						$("#yeardropdown").change(function(e) {
							
		                     selected_year = $(this).val();
		                     alert("selected year:"+selected_year);
	                         });
						
						 $("#Report").click(function(){
							
							 newUrl = "papulateReport"+"?"+"month="+selected_month +"&" +"year="+selected_year;
							 alert("newUrl:"+newUrl);
		  				    $("#list3").setGridParam({url:newUrl,page:1});
		  				    $("#list3").trigger("reloadGrid");

						 }); 
                        
						 $("#Save").click(function(){
							 var row_count = $("#list3").getGridParam("reccount");
							
							 var obj;
							 var obj_arr=[];
							 var roid;
							 var isSelected=false;
							 var select_flag = false ;
							 var count = 0;
							   
							   
							    /* if(select_flag!='true'){
							    alert("Select the record to edit the week hours ");
							    } */
							   
							    for(var i = 1; i<=row_count; i++)
								 {
									 roid = $($("tr.ui-widget-content")[i-1]).attr('id');
									 alert("roid:"+roid);
								     isSelected = $($("tr.ui-widget-content")[i-1]).attr('aria-selected');
								     alert("isSelected:"+isSelected);
								     if(isSelected =='true')
								 	 {  obj = {
									 "signum":jQuery("#list3").jqGrid('getCell', roid, 'signum'), 
									 "empName":jQuery("#list3").jqGrid('getCell', roid, 'empName'),
									 "domain":jQuery("#list3").jqGrid('getCell', roid, 'domain'),
									 "region":jQuery("#list3").jqGrid('getCell', roid, 'region'),
									 "project":jQuery("#list3").jqGrid('getCell', roid, 'project'),
									"customer":jQuery("#list3").jqGrid('getCell', roid, 'customer'),
									 "w1":jQuery("#list3").jqGrid('getCell', roid, 'w1'),
									 "w2":jQuery("#list3").jqGrid('getCell', roid, 'w2'),
									 "w3":jQuery("#list3").jqGrid('getCell', roid, 'w3'),
									  "w4":jQuery("#list3").jqGrid('getCell', roid, 'w4'),
									  "status":jQuery("#list3").jqGrid('getCell', roid, 'status'),
									  "utilPercent":jQuery("#list3").jqGrid('getCell', roid, 'utilPercent'),
									  "empid":jQuery("#list3").jqGrid('getCell', roid, 'empid'),
									  "id1": jQuery("#list3").jqGrid('getCell', roid, 'id1'),
									  "id2": jQuery("#list3").jqGrid('getCell', roid, 'id2'),
									  "id3": jQuery("#list3").jqGrid('getCell', roid, 'id3'),
									  "id4": jQuery("#list3").jqGrid('getCell', roid, 'id4'),
									  };
								 	 
								 	 count++;
								 	 obj_arr[count-1]=obj;   
								 		
								 	 }
							  		//alert(obj_arr[i].emp_rolelist);
								 } 
							  
							  alert (JSON.stringify(obj_arr));
							  
							 var json = {"id":"1"};
							 console.log("obj"+obj_arr.length);
								
							  $.ajax({
							        type: "POST",
							        url: "UpdateWeekHrs",
							       // data :  "{\"id\":2}",
							       
							        data :  JSON.stringify(obj_arr) ,
							        dataType:"json",
							        contentType: "application/json"
							    });  
							   
							    
							    
							/*     
							  for(var i = 1; i<=row_count; i++)
								 {
								     rid = $($("tr.ui-widget-content")[i-1]).attr('id');
								     isSelected = $($("tr.ui-widget-content")[i-1]).attr('aria-selected');
								     if(isSelected =='true')
								 	 {  obj = {"id":jQuery("#list3").jqGrid('getCell', rid, 'id'), 
									 "employe_Name":jQuery("#list3").jqGrid('getCell', rid, 'employe_Name'), 
									 "emp_rolelist":$("tr#"+rid+" select").val()};
								 	 
								 	 count++;
								 	 obj_arr[count-1]=obj;   
								 		
								 	 }
							  		//alert(obj_arr[i].emp_rolelist);
								 } 
							//   alert("Total count is :"+count);
							//  alert (JSON.stringify(obj_arr));
							  
							 var json = {"id":"1"};
							 console.log("obj"+obj_arr.length);
							 
						      $.ajax({
						        type: "POST",
						        url: "ProcessGridData",
						       // data :  "{\"id\":2}",
						       
						        data :  JSON.stringify(obj_arr) ,
						        dataType:"json",
						        contentType: "application/json"
						    });  */
						});
						 
						 
                        
                     
						$("#list3").jqGrid(
								{   
									 
									url : 'papulateReport',
									datatype : "json",
									 multiselect : true,
									 
									colNames : [ 'Signum', 'EmpName', 'Domain',
											'Region', 'Project', 'Customer',
											'ICRRB Hours', 'W1', 'W2', 'W3',
											'W4', 'W5', 'Status' ,
											'Percentage of Utilization' ,'week1_flag','week2_flag','week3_flag','week4_flag','week5_flag','emp_id','id1','id2','id3','id4','id5'],
									colModel : [ {
										name : 'signum',
										index : 'signum asc',
										width : 80
									},//formatter:'showlink', formatoptions:{baseLinkUrl:'www.google.com'}},
									{
										name : 'empName',
										index : 'empname asc',
										width : 100
										
									}, {
										name : 'domain',
										index : 'domain asc',
										width : 70
									}, {
										name : 'region',
										index : 'region asc',
										width : 80
										
									}, {
										name : 'project',
										index : 'project asc',
										width : 100
										
									}, {
										name : 'customer',
										index : 'customer asc',
										width : 100
										
									}, {
										name : 'icrrb',
										index : 'icrrb',
										width : 90
										
									}, {
										name : 'w1',
										index : 'w1',
										width : 40,
										editable:true
									}, {
										name : 'w2',
										index : 'w2',
										width : 40,
										editable:true
										
									}, {
										name : 'w3',
										index : 'w3',
										width : 40,
										editable:true
										
									}, {
										name : 'w4',
										index : 'w4',
										width : 40,
										editable:true
									
										
									},
									{
										name : 'w5',
										index : 'w5',
										width : 40,
										editable:true
									
										
									}, {
										name : 'status',
										index : 'status asc',
										width : 170
										
									}, {
										name : 'percentageutilization',
										index : 'percentageutilization',
										width : 120
									
									},
									
									 { name: 'week1_flag', hidden: true 
						                  
						             },
						             
						             { name: 'week2_flag', hidden: true  
						                  
						             },
						             { name: 'week3_flag', hidden: true  
						                  
						             },
						             { name: 'week4_flag', hidden: true 
						                  
						             },
						             { name: 'week5_flag', hidden: true 
						                  
						             },
						             { name: 'empid', hidden: true 
						                  
						             },
						             { name: 'id1', hidden: true 
						                  
						             },
						             { name: 'id2', hidden: true  
						                  
						             },
						             { name: 'id3', hidden: true 
						                  
						             },
						             { name: 'id4', hidden: true 
						                  
						             },
						             { name: 'id5', hidden: true 
						                  
						             }
						             

									],
									rowNum : 10,
									rowList : [ 10, 20, 30 ],
									pager : '#pager2',
									sortname : 'signum',
									viewrecords : true,
									sortorder : "desc",
									'cellEdit' : true,
									'cellsubmit' : 'clientArray',
									editurl : 'clientArray',
									caption : "Report",
									beforeProcessing : function() {
										
										/* alert($('#monthdropdown')[0].selectedIndex); */
										//dynamicColumns="['Signum','EmpName','Domain','Region','Project','Customer', 'ICRRB Hours','W1','W10','W3','W4','Status','Percentage of Utilization']",
									},
								
								   loadComplete: function() {
								    // 2 is zero-base index of the column 'name' ('Client'). Every from the options
								    // multiselect:true, rownumbers:true and subGrid:true will increase
								    // the index by 1 because the option inserts additional columns
								    var row_count = $("#list3 ").getGridParam("reccount");
								    for(var j = 1; j<=row_count; j++){
								    	
								    	rid =$($("tr.ui-widget-content")[j-1]).attr('id');
								    	
								    	flag1 =jQuery("#list3").jqGrid('getCell',rid, 'week1_flag');
								    	flag2 =jQuery("#list3").jqGrid('getCell',rid, 'week2_flag');
								    	flag3 =jQuery("#list3").jqGrid('getCell',rid, 'week3_flag');
								    	flag4 =jQuery("#list3").jqGrid('getCell',rid, 'week4_flag');
								    	flag5 =jQuery("#list3").jqGrid('getCell',rid, 'week5_flag');
								    	
								    	if(flag1=='Y'){
								    		
								    	jQuery("#list3").jqGrid('setCell',rid,"w1","",{color:'red'});	
								    	}
								    	
								    	if(flag2=='Y'){
									    		
									    	jQuery("#list3").jqGrid('setCell',rid,"w2","",{color:'red'});	
									    	}
								    	if(flag3=='Y'){	
									    	jQuery("#list3").jqGrid('setCell',rid,"w3","",{color:'red'});	
									    	}
								    	
								    	if(flag4=='Y'){
									    		
									    	jQuery("#list3").jqGrid('setCell',rid,"w4","",{color:'red'});	
									    	}
								    	if(flag5=='Y'){
								    		
									    	jQuery("#list3").jqGrid('setCell',rid,"w5","",{color:'red'});	
									    	}
								    		    	
								    	
								    }
                                   
								    alert("LoadComplete row_count :"+row_count);
								}
								
								});
                        
                       function onclickcall(cellValue, options, rowdata, action)
                       {
                    	   /* alert("here"+cellValue);
                    	   var edit = 20;
                    	   return edit; */
                       }
                       
                     /*   loadComplete: function() {
                    	    // 2 is zero-base index of the column 'name' ('Client'). Every from the options
                    	    // multiselect:true, rownumbers:true and subGrid:true will increase
                    	    // the index by 1 because the option inserts additional columns
                    	    $("#6 td:eq(2)", grid[0]).css({color:'red'});

                    	    grid.jqGrid('setCell',"12","name","",{color:'red'});
                    
                    	} */
                       
                     
						jQuery("#list2").jqGrid('navGrid', '#pager2', {
							edit : false,
							add : false,
							del : false
						}).jqGrid('navButtonAdd', "#pager2", {
							caption : "<em>Save</em>",
							onClickButton : null,
							position : "last",
							title : "Save",
							cursor : "pointer"
						}).jqGrid('setGroupHeaders', {
							useColSpanStyle : true,
							groupHeaders : [ {
								startColumnName : 'w1',
								numberOfColumns : 4,
								titleText : '<em>Productive Hrs</em>'
							}

							]

						});


						//------------------------------------------------------------------------------------------------------------------------

						/* $("#list3")
								.jqGrid(
										{
										//	url : 'resources/json/test2.json',
											datatype : "json",
											multiselect : true,
											colNames : [ 'SNo.',
													'EmployeeName', 'Skills',
													'TotalBillableHrs',
													'CancelEntry' ],
											colModel : [ {
												name : 'SNo',
												index : 'SNo',
												width : 55
											}, {
												name : 'EmployeeName',
												index : 'name asc, invdate',
												width : 200
											}, {
												name : 'Skills',
												index : 'Skills asc, invdate',
												width : 200
											}, {
												name : 'TotalBillableHrs',
												index : 'TotalBillableHrs',
												width : 100
											},

											{
												name : 'CancelEntry',
												index : 'CancelEntry',
												width : 75,
												sortable : false,
												formatter : deleteLink
											} ],
											rowNum : 10,
											rowList : [ 10, 20, 30 ],
											pager : '#pager3',
											sortname : 'id',
											viewrecords : true,
											sortorder : "desc",

											caption : "Validation needs to be done for following list"
										}); */

						jQuery("#list3").jqGrid('navGrid', '#pager3', {
							edit : false,
							add : false,
							del : false
						});

										
											
						/* $('#tabs-1 .ui-jqgrid-title').after('<div id="jqGridButtonDiv" align="center" ><button id="Button1Id" type="button" class="titlebutton ui-button ui-widget ui-state-default ui-corner-all '+
'ui-button-text-only" role="button">Export to Excel</button>'); */
						$('#tabs-1 .ui-jqgrid-title')
								.after(
										'<div id="jqGridButtonDiv" ><img src="resources/img/excel.jpeg" height="30px" width="30px"></img></div>');

					});
	//jQuery("#list2").jqGrid('navGrid',"#pager2").jqGrid('navButtonAdd',"#pager2",{caption:"Save", buttonicon:"resources/img/favicon.png", onClickButton:null, position: "last", title:"Save", cursor: "pointer"});

	/* if(condition_for_label_change)
	 {
	 $('#list').jqGrid('setLabel', 'column_index', 'New_Label', { 'text-align': 'left' });
	 } */

	$('#list2').jqGrid('setLabel', 7, 'W5');

	function deleteLink(cellValue, options, rowdata, action) {
		return "<a href='<%=request.getContextPath()%>' class='ui-icon ui-icon-cancel' />";
	}

	function actionLink(cellValue, options, rowdata, action) {
		return "<a href='#'>" + rowdata + "</a>";
	}
</script>
</head>
<body>

	<div id="eric_header" class="wpthemeBannerInner">
		<table style="width: 100%">
			<tr>
				<td style="width: 30%"><a href='#'><img src="resources/img/logo.png"
						class="media-object" alt=""></img></a></td>
				<td style="width: 40%">
					<div align="center">

						<p>
							Welcome <label for="ABCDE">  ${roleOfUser} </label>
					</div>
				</td>
				<td style="width: 30%">
					<div align="right">
						<a href="<c:url value="j_spring_security_logout" /> ">Logout</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="3"><img src="resources/img/color_line.jpg" width="100%"></img></td>
			</tr>
		</table>
	</div>


	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Report</a></li>
			<!-- <li><a href="#tabs-2">Validation</a></li> -->
		</ul>
		<div align="center" id="tabs-1">
			<div id="monthdiv" style="width: 1060px; background-color: #f5f5f5">
				<table align="right">
					<tr>
						<td bgcolor="#f5f5f5"><label for="months" style="font-size: 14px">Select
								month :</label></td>
						<td bgcolor="#f5f5f5"><select id="yeardropdown" style="font-size: 14px">
								<option value="2012">2012</option>
								<option value="2013">2013</option>
								<option value="2014">2014</option>
								<option value="2015" selected>2015</option>
								<option value="2016">2016</option>
						</select></td>
						<td bgcolor="#f5f5f5"><select id="monthdropdown" style="font-size: 14px">
								<option value="JAN">January</option>
								<option value="FEB">February</option>
								<option value="MAR">March</option>
								<option value="APR">April</option>
								<option value="MAY">May</option>
								<option value="JUN">June</option>
								<option value="JUL">July</option>
								<option value="AUG">August</option>
								<option value="SEP">September</option>
								<option value="OCT">October</option>
								<option value="NOV">November</option>
								<option value="DEC">December</option>
						</select></td>
					</tr>
					<tr>
					 <td>
					 
							<div class="ssoButton" align="center">
									<input type="submit" name="RPSubmit" value="GetReport"
										id="Report" class="eSsoLoginField">
							</div>
					 
					 </td>
					</tr>
				</table>
			</div>
			<div style="width: 1137px">
				<img src="resources/img/color_line.jpg" width="100%">
			</div>
			<table id="list3"></table>
			<div id="pager2"></div>

		</div>
         <div align ="center"   id="tabs-5" >
         <table>
				<tr>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Submit" value="Save"
								id="Save" class="eSsoLoginField">
						</div>
					</td>
					<td>
						
					</td>
				</tr>
			</table>
         
         </div>
		
		<div align="center" id="tabs-1" style="visibility: hidden;">

			<table id="list3">

				<tr>
					<td></td>
				</tr>
			</table>
			<div id="pager3"></div>
              <table>
				<tr>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Submit" value="Submit"
								id="Save" class="eSsoLoginField">
						</div>
					</td>
					<td>
						
					</td>
				</tr>
			</table>

              
			<br>

			<div class="ssoButton" align="right">
				<input type="submit" name="Validate" value="Validate"
					id="Validate.button.Validate" class="eSsoLoginField">
			</div>
			
			<table>
				<tr>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Submit" value="Submit"
								id="Save" class="eSsoLoginField">
						</div>
					</td>
					<td>
						
					</td>
				</tr>
			</table>

		</div>
	</div>
     
         
     
     

	<div id="ICH-FOOTER"></div>
</body>
</html>
